
<script>

  var log, day_usage, day_usage_ds, month_usage, month_usage_ds;
  
  YUI().use('charts','datasource-io','datasource-jsonschema','datatable-datasource','datatable-scroll',function(Y){
    

    var user_list = new Y.DataTable.Base({
      columnset: [{key: "call_sign", label: "Call Sign"},
                  {key: "message", label: "Message"}]
    });

    var user_list_ds = new Y.DataSource.IO({
      source: "webservice/main.cgi?method=get_all_users"
    });
    
    user_list_ds.plug(Y.Plugin.DataSourceJSONSchema,{
      schema:{
        resultListLocator: "results",
	resultFields: ["call_sign","message"]
      }
    });

    user_list.plug(Y.Plugin.DataTableScroll, {
      height: "600px"
    });

    user_list.plug(Y.Plugin.DataTableDataSource, {
      datasource: user_list_ds
    }).render("#user_list");

    user_list.datasource.load();
    
    var highlightRow = function(e){
      e.currentTarget.all('td').toggleClass('yui3-datatable-highlighted');
    }
    var selectedRow;
    var selectRow = function(e){
      if(selectedRow != null){
        selectedRow.all('td').removeClass('yui3-datatable-selected');
      }
      e.currentTarget.all('td').addClass('yui3-datatable-selected');
      selectedRow = e.currentTarget;
      var records = user_list.get("recordset"),
      currentRecord = records.getRecord(e.currentTarget.get("id"));
      showUserDetails(currentRecord.getValue("call_sign"));        
    }

    user_list.delegate( ['mouseenter','mouseleave'], highlightRow, '.yui3-datatable-data tr');
    user_list.delegate('click', selectRow, '.yui3-datatable-data tr');
    
    function showUserDetails(callsign){
      document.getElementById("user_details").style.visibility = "visible";
      document.getElementById("user_call").innerHTML = "Usage History for " + callsign;
      if(log != undefined){
        log.datasource.load({request: "&callsign=" + callsign});
        day_usage_ds.sendRequest({
          request: "&callsign=" + callsign,
	  callback: {
             success: function(e){
               Y.log(e);
               Y.Array.each(e.response.results, function(node){
                 node.timestamp = new Date(node.timestamp).toString();
               });
               day_usage.set('dataProvider',e.response.results);
             },
             failure: function(e){
             alert(e.response);
           }
          }
        });

      month_usage_ds.sendRequest({
      request: "&callsign=" + callsign,
      callback: {
        success: function(e){
          Y.log(e);
          Y.Array.each(e.response.results, function(node){
            node.timestamp = new Date(node.timestamp).toString();
          });
          month_usage.set('dataProvider',e.response.results);
        },
        failure: function(e){
          alert(e.response);
        }
      }
      });
	

      }else{
            log = new Y.DataTable.Base({
	      columnset: [{key: "StartTime", label: "Time (UTC)", sortable: true},
	          {key: "Duration", label: "Duration"},
		    {key: "XmtType", label: "TX Type", sortable:true},
		    {key: "DestRptr", label: "RPT2", sortable:true},
		    {key: "SrcRptr", label: "RPT", sortable:true},
		    {key: "DestStn", label: "UR CALL", sortable:true},
		    {key: "SrcStn", label: "MY CALL", sortable: true},
		    {key: "SrcStnExt", label: "Message"}
		    ],

		    });

	    var log_ds = new Y.DataSource.IO({ source: "webservice/main.cgi?method=get_log"});
	    log_ds.plug(Y.Plugin.DataSourceJSONSchema, {
	    schema: {
	      resultListLocator: "results",
	      resultFields: ["StartTime","Duration","XmtType","DestRptr","SrcRptr","DestStn","SrcStn","SrcStnExt"]
	    }});
    
            log_ds.sendRequest({
	      request: "&callsign=" + callsign,
              callback:{
                success: function(e){
                  Y.log(e);
                }
              }
            });

    log.plug(Y.Plugin.DataTableScroll,{
      height: "200px"
    });

    log.plug(Y.Plugin.DataTableDataSource,{
      datasource: log_ds
    }).render("#user_details_log");

    log.datasource.load();
          
        var myDataValues = [
    {timestamp:1317521045, usage:0},
    {timestamp:1317521045, usage:0},
    {timestamp:1317521045, usage:0},
    {timestamp:1317521045, usage:0},
    {timestamp:1317521045, usage:0}
];

      day_usage = new Y.Chart({
      dataProvider: myDataValues,
      render: "#user_tx_last_day",
      categoryKey: "timestamp",
      categoryType: "time",
      styles: {
                axes: {
                        timestamp: {
                                label: {
                                         rotation: -45
                                       }
                                }
                      }
               },
      seriesKeys: ["usage"]
    });

    var axes = day_usage.getAxisByKey("timestamp");
    axes.set('labelFunction',function(value){
      var date = new Date(value * 1000);
      return date.toLocaleTimeString();
    });


    day_usage_ds = new Y.DataSource.IO({source:"webservice/main.cgi?method=get_usage&time_frame=86400"});
    day_usage_ds.plug(Y.Plugin.DataSourceJSONSchema,{
      schema: {
        resultListLocator: "results",
        resultFields: ["timestamp","usage"]
      }});
    
    day_usage_ds.sendRequest({
      request: "&callsign=" + callsign,
      callback: {
        success: function(e){
          Y.log(e);
          Y.Array.each(e.response.results, function(node){
            node.timestamp = new Date(node.timestamp).toString();
          });
          day_usage.set('dataProvider',e.response.results);
        },
        failure: function(e){
          alert(e.response);
        }
      }
    });


      month_usage = new Y.Chart({
      dataProvider: myDataValues,
      render: "#user_tx_last_month",
      categoryKey: "timestamp",
      categoryType: "time",
      styles: {
                axes: {
                        timestamp: {
                                label: {
                                         rotation: -45
                                       }
                                }
                      }
               },
      seriesKeys: ["usage"]
    });

    var axes = month_usage.getAxisByKey("timestamp");
    axes.set('labelFunction',function(value){
      var date = new Date(value * 1000);
      return date.toDateString();
    });


    month_usage_ds = new Y.DataSource.IO({source:"webservice/main.cgi?method=get_usage&time_frame=2592000"});
    month_usage_ds.plug(Y.Plugin.DataSourceJSONSchema,{
      schema: {
        resultListLocator: "results",
        resultFields: ["timestamp","usage"]
      }});

    month_usage_ds.sendRequest({
      request: "&callsign=" + callsign,
      callback: {
        success: function(e){
          Y.log(e);
          Y.Array.each(e.response.results, function(node){
            node.timestamp = new Date(node.timestamp).toString();
          });
          month_usage.set('dataProvider',e.response.results);
        },
        failure: function(e){
          alert(e.response);
        }
      }
      });

    }
    }
  });

</script>

<div>

  <div style="float: left; width: 19%; height: 620px">
    <center><h3>User List</h3>
    <div id="user_list"></div>
    </center>
  </div>

  <div style="float: left; width: 79%;height: 620px">
    <div id="user_details" style="visibility: hidden">
      <center><h1 id="user_call"></h1></center>
      <div style="height: 250px">
        <div style="float: left; width: 47%;height: 99%;padding-right: 20px;"><center><h3>User usage last 24hrs (minutes of xmit)</h3></center><div style="height: 100%; width: 100%" id="user_tx_last_day"></div></div>
	<div style="float: left; width: 47%;height: 99%;padding-left: 20px;"><center><h3>User usage last month (minutes of xmit)</h3></center><div style="height: 100%; width: 100%" id="user_tx_last_month"></div></div>
	<br>
      </div>
      <br>
      <br>
      <br>
      <center>
      <h3>User TX Log</h3>
      <div id="user_details_log" style="width: 100%"></div>
      </center>
    </div>
  </div>

</div>
<div style="clear: both"></div>
